<!DOCTYPE html>
<html>
    <head>
        <title>Gua JSON配置演示</title>
        <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            .config { background-color: #f5f5f5; padding: 15px; border-radius: 5px; margin: 10px 0; }
            .endpoint { margin: 10px 0; }
            .performance { background-color: #e8f5e8; padding: 15px; border-radius: 5px; margin: 10px 0; }
        </style>
    </head>
    <body>
        <h1>🔧 Gua框架 JSON配置演示</h1>
        
        <div class="config">
            <h2>当前JSON配置</h2>
            <p><strong>提供者:</strong> {{ provider }}</p>
            <p><strong>版本:</strong> {{ version }}</p>
            <p><strong>可用性:</strong> {{ available }}</p>
        </div>
        
        <div class="endpoint">
            <h2>API端点</h2>
            <p><a href="/api/auto">自动JSON选择</a></p>
            <p><a href="/api/performance">性能测试</a></p>
            <p><a href="/api/large-data">大数据处理</a></p>
        </div>
        
        <div class="performance">
            <h2>WebSocket实时性能监控</h2>
            <div class="websocket-status">
                <p><strong>连接状态:</strong> <span id="ws-status">未连接</span></p>
            </div>
            
            <div class="test-controls">
                <h3>测试控制</h3>
                <button id="connect-btn">连接WebSocket</button>
                <button id="performance-btn" disabled>执行性能测试</button>
                <button id="echo-btn" disabled>发送测试消息</button>
                <input type="text" id="message-input" placeholder="输入测试消息" disabled>
            </div>
            
            <div class="performance-data">
                <h3>性能测试结果</h3>
                <div id="performance-data">
                    <p>点击"执行性能测试"按钮开始测试</p>
                </div>
            </div>
            
            <div class="echo-data">
                <h3>消息回显</h3>
                <div id="echo-data">
                    <p>发送消息后会在这里显示回显结果</p>
                </div>
            </div>
            
            <div class="instructions">
                <h3>使用说明</h3>
                <ol>
                    <li>点击"连接WebSocket"按钮建立连接</li>
                    <li>连接成功后，可以使用以下功能：
                        <ul>
                            <li><strong>性能测试:</strong> 点击"执行性能测试"按钮，服务器会执行50次JSON序列化操作并返回性能数据</li>
                            <li><strong>消息回显:</strong> 在输入框中输入任意文本，点击"发送测试消息"或按回车，服务器会回显你的消息</li>
                        </ul>
                    </li>
                    <li>所有测试结果都会实时显示在页面上</li>
                </ol>
            </div>
        </div>
        
        <style>
            .websocket-status { margin: 10px 0; }
            .test-controls { margin: 15px 0; }
            .test-controls button { margin: 5px; padding: 8px 12px; }
            .test-controls input { margin: 5px; padding: 8px; width: 200px; }
            .performance-data, .echo-data, .instructions {
                background-color: #f9f9f9;
                padding: 15px;
                border-radius: 5px;
                margin: 10px 0;
            }
            .connected { color: green; }
            .disconnected { color: red; }
            .performance-result {
                background-color: #e8f5e8;
                padding: 10px;
                border-radius: 3px;
                margin: 5px 0;
            }
            .echo-result {
                background-color: #e8f0ff;
                padding: 10px;
                border-radius: 3px;
                margin: 5px 0;
            }
        </style>
        
        <script>
            let ws = null;
            const statusEl = document.getElementById('ws-status');
            const connectBtn = document.getElementById('connect-btn');
            const performanceBtn = document.getElementById('performance-btn');
            const echoBtn = document.getElementById('echo-btn');
            const messageInput = document.getElementById('message-input');
            const perfDiv = document.getElementById('performance-data');
            const echoDiv = document.getElementById('echo-data');
            
            function updateStatus(connected) {
                if (connected) {
                    statusEl.textContent = '已连接';
                    statusEl.className = 'connected';
                    connectBtn.textContent = '断开连接';
                    performanceBtn.disabled = false;
                    echoBtn.disabled = false;
                    messageInput.disabled = false;
                } else {
                    statusEl.textContent = '未连接';
                    statusEl.className = 'disconnected';
                    connectBtn.textContent = '连接WebSocket';
                    performanceBtn.disabled = true;
                    echoBtn.disabled = true;
                    messageInput.disabled = true;
                }
            }
            
            function connectWebSocket() {
                if (ws && ws.readyState === WebSocket.OPEN) {
                    ws.close();
                    return;
                }
                
                ws = new WebSocket('ws://localhost:8000/ws');
                
                ws.onopen = function() {
                    console.log('WebSocket连接已建立');
                    updateStatus(true);
                };
                
                ws.onmessage = function(e) {
                    const data = JSON.parse(e.data);
                    if (data.type === 'performance') {
                        perfDiv.innerHTML =
                            '<div class="performance-result">' +
                            '<p><strong>序列化时间:</strong> ' + data.serialize_time + 'ms</p>' +
                            '<p><strong>数据大小:</strong> ' + data.data_size + ' bytes</p>' +
                            '<p><strong>操作次数:</strong> ' + data.operations + '</p>' +
                            '<p><strong>时间戳:</strong> ' + new Date(data.timestamp * 1000).toLocaleTimeString() + '</p>' +
                            '</div>';
                    } else if (data.type === 'echo') {
                        const timestamp = new Date(data.timestamp * 1000).toLocaleTimeString();
                        echoDiv.innerHTML =
                            '<div class="echo-result">' +
                            '<p><strong>发送消息:</strong> ' + data.data + '</p>' +
                            '<p><strong>回显时间:</strong> ' + timestamp + '</p>' +
                            '</div>';
                    }
                };
                
                ws.onclose = function() {
                    console.log('WebSocket连接已关闭');
                    updateStatus(false);
                };
                
                ws.onerror = function(error) {
                    console.error('WebSocket错误:', error);
                    updateStatus(false);
                };
            }
            
            connectBtn.addEventListener('click', connectWebSocket);
            
            performanceBtn.addEventListener('click', function() {
                if (ws && ws.readyState === WebSocket.OPEN) {
                    ws.send('performance');
                }
            });
            
            echoBtn.addEventListener('click', function() {
                const message = messageInput.value.trim();
                if (message && ws && ws.readyState === WebSocket.OPEN) {
                    ws.send(message);
                    messageInput.value = '';
                }
            });
            
            messageInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    echoBtn.click();
                }
            });
            
            // 初始化状态
            updateStatus(false);
        </script>
    </body>
</html>